<template>
	<view :style="{height:PhoneInfo.windowHeight + 'px',width:PhoneInfo.windowWidth + 'px'}">
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<u-toast ref="uToast"></u-toast>
		<view style="margin: 2% 4%;">
			<u-search v-model="searchKeyword" @search="this.getSensorList()" shape="round" bgColor='#fff'
				borderColor='#c4c6c9' placeholderColor='#c4c6c9' :clearabled="true" :showAction="true" actionText="绑定"
				@custom="gotoAdd" input-align="left">
			</u-search>
		</view>
		<view style="height: 1358rpx;" v-show="!noData">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrolltolower">
				<view v-for="(item,index) in sensorList" :key="item.macCode"
					:class="[item.onlineStatus==1?'sensorlist senli':'sensorlist senst']">
					<u-swipe-action>
						<u-swipe-action-item :options="options" @click="untiesensor(item)">
							<uni-list :border='false'>
								<uni-list-item :clickable="true" @click="alterSensor(item.devicePrototypeRealId)">
									<template v-slot:header>
										<view class="soltheader">
											<image class="slot-image" :src="judgeHealth(item.onlineStatus)"
												mode="aspectFit">
											</image>
										</view>
									</template>
									<template v-slot:body>
										<view class="soltbody">
											<text
												:class="['slotbody','slot-title',item.onlineStatus==1?'lan':item.onlineStatus==2?'hei':'hui']">
												{{item.devicePrototypeRealId}}{{item.name==""?'':"("+item.name+")"}}</text>
											<view
												:class="['slotbody','slot-note',item.onlineStatus==1?'lan':item.onlineStatus==2?'hei':'hui']">
												{{item.equipmentName}} 一 {{item.pointName}}
											</view>
										</view>
									</template>
									<template v-slot:footer>
										<view class="slotfooter">
											<u-icon
												:name="item.onlineStatus==1?'wifi':item.onlineStatus==2?'wifi-off':'question-circle'"
												:color="item.onlineStatus==1?'#2979ff':item.onlineStatus==2?'#303133':'#82848a'"
												size="28" :label="item.onlineStatusName"
												:labelColor="item.onlineStatus==1?'#2979ff':item.onlineStatus==2?'#303133':'#82848a'"></u-icon>
										</view>
									</template>
								</uni-list-item>
							</uni-list>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</scroll-view>
		</view>
		<view v-show="noData">
			<view class="header">
				<image mode="aspectFit" src="/static/img/nodata.png" style="width: 320px;
					height: 240px;"></image>
			</view>
			<view class="title">
				<text>您还没有为测点绑定传感器，请先绑定传感器。</text>
			</view>
		</view>
		<!-- 解绑弹窗 -->
		<view>
			<u-modal :show="show" confirmColor='#2979ff' confirmText='解绑' :content='content' :showCancelButton="true"
				@confirm="confirm" @cancel="this.show = false">
			</u-modal>
		</view>
		<u-loadmore nomore-text=' ' :status="loadStatus" bgColor="#efeff4"></u-loadmore>
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				PhoneInfo: '',
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#2979FF",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "传感器列表",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				options: [{
					icon: 'trash-fill',
					iconSize: '20',
					style: {
						backgroundColor: '#f56c6c',
						width: '40px',
						height: '40px',
						borderRadius: '100px',
						margin: '0 6px'
					}
				}],
				searchKeyword: '',
				userinfo: '',
				sensorList: [],
				pageSize: 15,
				count: 0,
				pageIndex: 1,
				show: false,
				unbundlemaccode: '',
				content: '',
				loadStatus: '',
				noData: false,
			}
		},
		onLoad(parameter) {
			this.PhoneInfo = this.$utils.GetPhoneInfo();
			this.userinfo = uni.getStorageSync('userinfo');
			uni.showLoading({
				title: "加载中...",
				mask: true,
			});
			uni.request({
				url: getApp().globalData.serverAddress + this.$uri.Uri_lookSensorList.replace("{userRealId}",
					this.userinfo.userRealId),
				data: {
					page: this.pageIndex,
					limit: this.pageSize
				},
				dataType: "json",
				method: "GET",
				success: (res) => {
					if (res.statusCode !== 200) {
						this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
						return
					}
					this.count = res.data.count
					this.sensorList = res.data.data
					if (this.count < this.pageSize) {
						this.loadStatus = "nomore";
						if (this.sensorList.length !== 0) {
							this.noData = false;
						} else {
							this.noData = true;
						}
					} else {
						this.loadStatus = "loadmore";
					}
				},
				fail: () => {
					this.$utils.showToast(this, '加载失败！', 'error');
				},
				complete: () => {
					uni.hideLoading();
					if (JSON.stringify(parameter) !== "{}") {
						uni.showModal({
							confirmColor: '#2979ff',
							cancelText: '否',
							confirmText: '是',
							content: '您已成功绑定传感器，是否立刻前往设置传感器参数？',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/sensor/sensor?macCode=" + parameter
											.macCode
									})
								}
							}
						})
					}
				}
			})
		},
		methods: {
			//解绑传感器
			untiesensor(value) {
				this.unbundlemaccode = value.devicePrototypeRealId;
				this.content = '是否解绑' + value.equipmentName + '中' + value.pointName + '下的传感器？';
				this.show = true;
			},
			//解绑按钮
			confirm() {
				this.show = false
				uni.showLoading({
					title: "解绑中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_removeSensor
						.replace("{userRealId}",
							this.userinfo.userRealId).replace("{devicePrototypeRealId}",
							this.unbundlemaccode),
					dataType: "json",
					method: "POST",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.$utils.showToast(this, '解绑成功！', 'success');
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail: () => {
						this.$utils.showToast(this, '解绑失败！', 'error');
					},
					complete: () => {
						this.getSensorList()
						uni.hideLoading();
					}
				})
			},
			//返回
			onLeftClick() {
				uni.switchTab({
					url: '/pages/tabbar/userCenter'
				});
			},
			//新增传感器
			gotoAdd() {
				uni.navigateTo({
					url: '/pages/sensor/addSensor'
				})
			},
			//获取传感器列表
			getSensorList() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookSensorList.replace("{userRealId}",
						this.userinfo.userRealId),
					data: {
						page: this.pageIndex,
						limit: this.pageSize,
						name: this.searchKeyword
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.count = res.data.count
							this.sensorList = res.data.data
							//每页显示15如果拿到的页面个数小于15的话,那么就表示无数据啦
							if (this.count < this.pageSize) {
								this.loadStatus = "nomore";
							} else {
								this.loadStatus = "loadmore";
							}
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail: () => {
						this.$utils.showToast(this, '加载失败！', 'error');
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			//传感器图片
			judgeHealth(value) {
				if (value == 1) {
					return '/static/img/userCenter/sensor.png'; //在线
				} else if (value == 2) {
					return '/static/img/sensorhei.png'; //离线
				} else if (value == 3) {
					return '/static/img/sensorhui.png'; //未知
				}
			},
			//跳转传感器详情
			alterSensor(value) {
				uni.navigateTo({
					url: "/pages/sensor/sensor?macCode=" + value
				})
			},
			scrolltolower() {
				if (this.count < this.pageSize) {
					this.loadStatus = "nomore";
				} else {
					setTimeout(() => {
						this.loadStatus = "loading";
						this.pageSize += 10;
						this.getSensorList();
					}, 500);
				}
			},
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pageSize = 15;
			this.getSensorList();
			uni.stopPullDownRefresh();
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	.sensorlist {
		border-radius: 15px;
		background-color: #fff;
		overflow: hidden;
		margin: 3% auto;
		width: 90%;
	}

	.senli {
		border: 1px solid #5acf25;
	}

	.senst {
		border: 1px solid #82848a;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		width: 40px;
		height: 40px;
	}

	.slotbody {
		margin-left: 5%;
	}

	.slot-title {
		font-size: 16px;
		word-wrap: break-word;
	}

	.slot-note {
		word-wrap: break-word;
		font-size: 14px;
	}

	.slotfooter {
		width: 20%;
		display: flex;
	}

	.soltbody {
		width: 70%;
	}

	.soltheader {
		width: 10%;
	}


	.online {
		margin-left: 1%;
		position: relative;
		top: -2%;
	}


	.hui {
		color: #82848a;
	}

	.lan {
		color: #2979ff;
	}

	.hei {
		color: #303133;
	}


	.header {
		width: 320px;
		height: 240px;
		margin: 80px auto 0px;
	}

	.title {
		width: 100%;
		font-size: 15px;
		color: #a8a8a8;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0rpx;
		padding: 0px 45px;
	}
</style>